﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表格应用</title>
    <script type='text/javascript' src="js/jquery-1.3.2.js"></script>    
     <style type='text/css'>
		thead
		{
		    font-size:12pt;
		    font-weight:bold;
		    color:#444;	    
		}
		
		tbody
		{
		    font-size:10pt;
		    color:#444;		    
		}
		
		td,th
		{
		     border:solid 1px #E6E6E6;
		     padding-left:3px;
		}
		
		th
		{
		    background-color:#5B8;
		}
		
		.alternation
		{
		    background-color:#D2FFD2;
		}
		
		.alternation3
		{
		    background-color:#DDEEDD;
		}
		
		.mouseOver
		{
		    background-color:#DFD;
		}
		
		.selected
		{
		    background-color:#B3E1A3;
		}
    </style>
    
    <script type='text/javascript'>
    	//<![CDATA[
    	/*
			ORain: 2009-3-10
			http://blog.csdn.net/orain 
		*/
        $(function() {
            //交替显示行
            $('#alternation').click(function() {
                $('tbody > tr:odd', $('#example')).toggleClass('alternation');
            });

            //三色交替显示行
            $('#alternationThree').click(function() {
                $('tbody > tr:nth-child(3n)', $('#example')).toggleClass('alternation');
                $('tbody > tr:nth-child(3n+2)', $('#example')).toggleClass('alternation3');
            });

            //选择行
            $('#selectTr').click(function() {
                //为表格行添加选择事件处理
                $('tbody > tr', $('#example')).click(function() {
                    $('.selected').removeClass('selected');
                    $(this).addClass('selected'); //this 表示引发事件的对象，但它不是 jquery 对象
                }).hover(		//注意这里的链式调用
					function() {
					    $(this).addClass('mouseOver');
					},
					function() {
					    $(this).removeClass('mouseOver');
					}
				);
            });


            ///////////////////////////////程明亮追加 begin 

            //为表格行添加选择事件处理
            $('tbody > tr', $('#example')).click(function() {
                $('.selected').removeClass('selected');
                $(this).addClass('selected'); //this 表示引发事件的对象，但它不是 jquery 对象
            }).hover(		//注意这里的链式调用
					        function() {
					            $(this).addClass('mouseOver');
					        },
			        function() {
			            $(this).removeClass('mouseOver');
			        }

		        );


            //取得当前选中行
            var myRows = $('table#example tr').click(function() {

                alert('Row #' + myRows.index(this) + 'clicked');
                $('#Text2').val(myRows.index(this));

            });

            $('#btnDelete').click(function() {
                //alert("btnDelete");
                //alert($("tbody > tr").attr("class", "selected"));

                //alert($("tbody > tr").css("selected"));
            });


            $('#btnAdd').click(function() {
                alert("btnAdd");
            });


            $('#btnEdit').click(function() {
            alert("btnEdit");

         
                $("#example").find("tr:eq(1").each(function() {
//                    $(this).find("td").each(function() {
//                        $(this).find(">td:eq(0)>input")
                //                   });
                  
                    $(this).find(">td:eq(1)>div").attr('display',none);
                });
            });


            ///////////////////////////////程明亮追加  end


            //增加排序功能
            $('#sort').click(tableSort);

            //获取排好序后的主键值
            $('#getSequence').click(function() {
                var sequence = [];
                $('#content input[name=noticeSelect]').each(function() {
                    sequence.push(this.value);
                });
                alert(sequence.join(','));
            });

            //获取表格中已选择的复选框的值集合
            $('#getSelected').click(function() {
                var sequence = [];
                $('#content input[name=noticeSelect]:checked').each(function() {
                    sequence.push(this.value);
                });
                alert(sequence.join(','));
            });

            //按日期降序排列
            $('#dateDesc').click(descByDate);
        });
		
		//表格排序
		function tableSort()
		{
			var tbody = $('#example > tbody');
			var rows = tbody.children();
			var selectedRow;
			//压下鼠标时选取行
			rows.mousedown(function(){
				selectedRow = this;
				tbody.css('cursor', 'move');
				return false;	//防止拖动时选取文本内容，必须和 mousemove 一起使用
			});
			rows.mousemove(function(){
				return false;	//防止拖动时选取文本内容，必须和 mousedown 一起使用
			});
			//释放鼠标键时进行插入
			rows.mouseup(function(){				
				if(selectedRow)
				{
					if(selectedRow != this)
					{
						$(this).before($(selectedRow)).removeClass('mouseOver'); //插入														
					}
					tbody.css('cursor', 'default');
					selectedRow = null;	
				}								
			});
			//标示当前鼠标所在位置
			rows.hover(
				function(){					
					if(selectedRow && selectedRow != this)
					{
						$(this).addClass('mouseOver');	//区分大小写的，写成 'mouseover' 就不行						
					}					
				},
				function(){
					if(selectedRow && selectedRow != this)
					{
						$(this).removeClass('mouseOver');
					}
				}
			);
			
			//当用户压着鼠标键移出 tbody 时，清除 cursor 的拖动形状，以前当前选取的 selectedRow			
			tbody.mouseover(function(event){
				event.stopPropagation(); //禁止 tbody 的事件传播到外层的 div 中
			});	
			$('#contain').mouseover(function(event){
				if($(event.relatedTarget).parents('#content')) //event.relatedTarget: 获取该事件发生前鼠标所在位置处的元素
				{
					tbody.css('cursor', 'default');
					selectedRow = null;
				}
			});
		}
		
		//按日期降序排列
		function descByDate()
		{
			var descElements = $('#content > tr').get().sort(function(first, second){				
				var f = $('td:eq(4)', first).html();	//first = $('td:eq(4)', first).html();IE 下会有问题，FF 正常，下同
				var s = $('td:eq(4)', second).html();
				if(f < s)
					return 1;				
				if(f == s)
					return 0;
				return -1;				
			});			
			$(descElements).appendTo('#content');
		}
	//]]>
    </script>
   
</head>
<body>
	<div id='contain' style="padding:5px;">
		<table id='example' style="width:800px; border-collapse:collapse;">
			<!--<thead style="text-align:center;" >-->
				<tr><td colspan='5'>公告列表</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
				<tr>
					<th style="width:50px;">序号</th>
					<th style="width:100px;">单位</th>
					<th style="width:300px;">界数</th>
					<th style="width:100px;">主席</th>
					<th style="width:150px;">副主席</th>
					<th style="width:150px;">委员姓名</th>
					<th style="width:150px;">委员分工</th>
					<th style="width:150px;">备注</th>
				</tr>
			<!--</thead>-->		
			<!--<tbody id='content'>-->
				<tr>
					<td style="text-align:center; ">     </td>
					<td style="text-align:center;">
                        <div>1</div>
                        <input id="Text1" type="text" />
                    </td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>2009-01-02 10:30</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td style="text-align:center;">2</td>
					<td style="text-align:center;">02</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>2009-01-03 09:30</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td style="text-align:center;">3</td>
					<td style="text-align:center;">03</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>2009-01-05 14:30</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td style="text-align:center;">4</td>
					<td style="text-align:center;">04</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>2009-01-10 20:45</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td style="text-align:center;">5</td>
					<td style="text-align:center;">05</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>2009-01-14 17:58</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td style="text-align:center;">6</td>
					<td style="text-align:center;">06</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>2009-01-19 07:22</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td style="text-align:center;">7</td>
					<td style="text-align:center;">07</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>2009-01-21 10:44</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td style="text-align:center;">8</td>
					<td style="text-align:center;">08</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>2009-01-22 16:37</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td style="text-align:center;">9</td>
					<td style="text-align:center;">09</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>2009-01-28 14:08</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td style="text-align:center;">10</td>
					<td style="text-align:center;">10</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>2009-02-01 21:14</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>			
			<!--</tbody>-->
		</table>
	</div>
	<br />
	<input type='button' id='alternation' value='交替显示' /> <input type='button' id='alternationThree' value='三色替换' />
	<input id="btnDelete" type="button" value="删除"  />
    <input id="btnAdd" type="button" value="追加" />
    <input id="btnEdit" type="button" value="修改" />
    <input id="Text2" type="text" /><br />
	<input type="button" id='selectTr' value='选择行' /><br />
	<input type='button' id='sort' value='排序' /> <input type='button' id='getSequence' value='获取值序列' /><br />
	<input type='button' id='getSelected' value='获取表格中选取的值' /> <input type='button' id='dateDesc' value='按日期降序' />
</body>
</html>
